import React, { useState,useEffect  } from 'react';
import { Table, Space,Button,Popconfirm } from 'antd';
import { connect } from 'umi';  //中间件使用model数据
import NxModal from './components/UserModal'
const UserTable =  (props:any)=>{  
  let { users,dispatch } = props  //结构props
    console.log(props,'props');
    const [isShowvisible, setisShowvisible] = useState(false);
    const [Record, setRecord] = useState(null);
    // 
    useEffect(() => {
        if(isShowvisible){
          console.log('是真的');
        }
    },[isShowvisible])
    const hanlclick =  (record:any)=>{
      console.log(record);
      if(record.id){
        setRecord(record)
        setisShowvisible(true)
      }else{
        setRecord(null)
        setisShowvisible(true)
        
      }
    }
    const delclick =  (record:any)=>{
      console.log(record,'删除按钮');
      dispatch({
        type: 'users/DelUserlist',
        payload: {
          ids:record.id
        },
      });
    }
    // 关闭弹窗
    const CloceClick =  ()=>{
      setisShowvisible(false)
    }
    
    const onFinish = (values: any) => {
      console.log('Success:', values);
      if(!Record){
          dispatch({
            type: 'users/AddUserlist',
            payload: {
              values
            },
            // 这里使用回调函数，来判断窗口的开关
            callback:(res)=>{
              if(res.success){
                setisShowvisible(false)
              }
            }
          })  
      }else{
        dispatch({
          type: 'users/EditUserlist',
          payload: {
            values
          },
          callback:(res)=>{
            if(res.success){
              setisShowvisible(false)
            }
          }

        })
      }
    };
    const config = {
      isShow: isShowvisible,
      Cloce: CloceClick,
      record: Record,
      title:Record?'编辑用户':'新增用户',
      onFinish:onFinish
    }
    const columns = [
        {
          title: 'UserName',
          dataIndex: 'userName',
          key: 'userName',
        },
        {
          title: 'Account',
          dataIndex: 'account',
          key: 'account',
        },
        {
          title: 'CreateDate',
          dataIndex: 'createDate',
          key: 'createDate',
        },
        {
          title: 'Action',
          key: 'action',
          render: (text:any, record:any) => (
            <Space size="middle">
              <a onClick={()=>{hanlclick(record)}}>编辑</a>
            <Popconfirm title="你确定要删除吗?" onConfirm={()=>{delclick(record)}}>
            <a>删除</a>
            </Popconfirm>

            </Space>
          ),
        },
      ];
    return(
        <div className='usertable'>
              <Button type="primary" onClick={hanlclick}> 添加</Button>
             <Table columns={columns} dataSource={users.data} rowKey='id' />
          <NxModal {...config}></NxModal>

        </div>
    )
}





const mapStateProps = ({users})=>{
    return {
        users
    }

}
export default connect(mapStateProps)(UserTable)
